import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, ScrollView, ImageBackground, Alert, TouchableOpacity} from 'react-native';
import {Button, WhiteSpace, WingBlank, Flex, Toast} from '@ant-design/react-native';
import {getParkingDataInfo, getParkingOrderSingleInfo} from '~/api/parking';
import Parkpublics from '~/components/process/parkpublics';

const comfie = require('~/assets/public/comfie.png');
const noselect2 = require('~/assets/public/noselect2.png');

class Paymentmoney extends Component {
    static navigationOptions = ({navigation}) => {
        return {
            title: '确认支付定金',
            headerTitleStyle: {color: 'white'},
            headerLeft: (
                <Flex
                    onPress={() => {
                        navigation.goBack();
                    }}
                    style={{marginLeft: 10}}>
                    {/*<Image style={{width: 27, height: 27}} source={require('~/assets/public/liback.png')} />*/}
                </Flex>
            ),
            headerRight: (
                <Flex
                    onPress={() => {
                        navigation.navigate('NavigatorTab');
                    }}
                    style={{marginRight: 10}}>
                    <Image style={{width: 27, height: 27}} source={require('~/assets/public/backhome.png')} />
                </Flex>
            ),
            headerTransparent: true,
        };
    };
    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);

        // 设置当前组件的属性
        this.state = {
            parkinglist: [],
            parkinginfo: [],
            orderid: this.props.navigation.getParam('orderid'),
            DepositPirce: 0,
            checked: false,
        };

        getParkingOrderSingleInfo(this.state.orderid).then((r) => {
            if (r.code === 0) {
                this.setState({
                    DepositPirce: r.data.DepositPirce,
                });
                //获取车位信息
                this.getparkinfo(r.data.ParkingDataID);
            } else {
                Alert.alert(r.msg);
            }
        });
    }
    getparkinfo(id) {
        getParkingDataInfo(id).then((r) => {
            if (r.code === 0) {
                this.setState({
                    parkinglist: r.data,
                });
            } else {
                console.log(r.msg);
            }
        });
    }
    render() {
        const onpress = () => {
            if (this.state.checked === false) {
                Toast.info('请阅读并同意协议', 1);
            } else {
                this.props.navigation.replace('Pay', {DepositPirce: this.state.DepositPirce, orderid: this.state.orderid});
            }

            // this.props.navigation.push('PaySuccess', {orderid: this.state.orderid});
        };
        const cancel = () => {
            this.props.navigation.replace('MyOrder');
        };

        return (
            <View style={{width: '100%', height: '100%'}}>
                <View style={{width: '100%', height: '35%', flexDirection: 'column'}}>
                    <ImageBackground
                        style={{height: 180, resizeMode: 'repeat', justifyContent: 'center'}}
                        source={require('~/assets/public/juxing.png')}
                    />
                    <View style={{margin: 10, width: '90%', marginLeft: '5%', marginRight: '5%', marginTop: -90}}>
                        <Parkpublics parkinginfo={this.state.parkinglist} />
                    </View>
                    <View
                        style={{
                            backgroundColor: 'white',
                            width: '90%',
                            marginLeft: '5%',
                            marginRight: '5%',
                            marginTop: 10,
                            borderRadius: 5,
                        }}>
                        <Flex direction={'column'} style={{marginTop: 20}}>
                            <Text style={{color: '#888888', fontsize: 16}}>请付款:</Text>
                            <Flex align={'end'} style={{marginTop: 10}}>
                                <Text style={{fontSize: 12, color: '#ec4f46'}}>
                                    ￥ <Text style={{fontSize: 24, color: '#ec4f46', fontWeight: 'bold'}}>{this.state.DepositPirce}</Text>
                                </Text>
                            </Flex>
                            <Text style={{color: '#888888', fontsize: 16, marginTop: 10}}>
                                购买{this.state.parkinglist.BuildingName}
                                {this.state.parkinglist.ParkingName}车位的定金
                            </Text>
                            <Flex style={{marginTop: 80, marginBottom: 20, width: '80%'}} justify={'between'}>
                                <Flex>
                                    <Image style={{width: 14, height: 11.5}} source={require('~/assets/public/weixin.png')} />
                                    <Text style={{fontSize: 14, color: '#333333', paddingLeft: 10}}>微信支付</Text>
                                </Flex>
                                <View style={{width: 16, height: 16, borderRadius: 8, backgroundColor: '#ec4f46'}} />
                            </Flex>
                        </Flex>
                    </View>
                    <Flex align={'start'} style={{width: '90%', marginLeft: '5%', marginRight: '5%', marginTop: 20}}>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={() => {
                                this.setState({
                                    checked: !this.state.checked,
                                });
                            }}>
                            <Image style={{width: 15, height: 15}} source={this.state.checked ? comfie : noselect2} />
                        </TouchableOpacity>
                        <Text style={{paddingLeft: 10, marginRight: 15, color: 'gray', fontSize: 14, lineHeight: 15}}>
                            同意
                            <Text
                                onPress={() => {
                                    this.props.navigation.push('ConfirmMoney', {CompanyBuildingID: this.state.parkinglist.CompanyBuildingID});
                                }}
                                style={{color: '#EC4F46'}}>
                                车位诚意金协议
                            </Text>
                            、
                            {this.state.parkinglist.SellRight === 0 ? (
                                <Text
                                    onPress={() => {
                                        this.props.navigation.push('ConfirmAgreement', {CompanyBuildingID: this.state.parkinglist.CompanyBuildingID});
                                    }}
                                    style={{color: '#EC4F46'}}>
                                    车位认购协议（产权）
                                </Text>
                            ) : (
                                <Text
                                    onPress={() => {
                                        this.props.navigation.push('ConfirmUseAgreement', {
                                            CompanyBuildingID: this.state.parkinglist.CompanyBuildingID,
                                        });
                                    }}
                                    style={{color: '#EC4F46'}}>
                                    车位认购协议（使用）
                                </Text>
                            )}
                        </Text>
                    </Flex>
                </View>
                <Flex style={{width: '100%', height: 40, position: 'absolute', bottom: 0}} align={'end'} justify={'end'}>
                    <Flex style={{width: '50%', height: 40}} onPress={cancel}>
                        <Text style={{backgroundColor: 'white', width: '100%', height: 40, fontsize: 16, textAlign: 'center', paddingTop: 12}}>
                            稍后付款
                        </Text>
                    </Flex>
                    <Flex style={{width: '50%', height: 40}} onPress={onpress}>
                        <Text
                            style={{
                                backgroundColor: '#ec4f46',
                                paddingTop: 12,
                                color: 'white',
                                width: '100%',
                                height: 40,
                                fontsize: 16,
                                textAlign: 'center',
                            }}>
                            立即支付
                        </Text>
                    </Flex>
                </Flex>
            </View>
        );
    }
}

export default Paymentmoney;
const styles = StyleSheet.create({});
